<script>
export default {
  data() {
    return {
      s_data: '',
      q_lan: new Set()
    };
  },
  created() {
    // 在created钩子中初始化数据
    this.initializeData();
  },
  methods: {
    async initializeData() {
      var s_data_copy = ""
      await this.$axios.get(this.$s_host + '/items/get_qdata').then(function (response) {
        s_data_copy = response.data
      }).catch(function (error) {
      });
      this.s_data = s_data_copy
      let mySet = new Set();
      for (var i in this.s_data) {
        this.q_lan.add(this.s_data[i].language)
      }
    }
  },
}
</script>

<template>

  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane style="white-space: pre-wrap;" :label="lan" v-for="lan in q_lan">
      <div v-for="data in s_data">
            <span v-if="data.language==lan">
              <span v-if="data.type==0">
                <el-row>
                  <el-col :span="1"><b>题目:</b></el-col>
                  <el-col :span="22">{{ data.question }}</el-col>
                  <el-col :span="1"><router-link
                      :to="{name:'change',params:{id:data.id,type:0}}">更新</router-link></el-col>
                </el-row>
                <div>
                  <div class="c_a">
                    A:{{ data.A }}
                  </div>
                   <div class="c_a">
                     B:{{ data.B }}</div>
                   </div>
                <div>
                  <div class="c_a">
                     C:{{ data.C }}
                  </div>
                  <div class="c_a">
                      D{{ data.D }}</div>
                  </div>

              <div>{{ data.answer }}</div>
                <el-divider/>
            </span>
              <span v-else>
                <el-row>
                  <el-col :span="1"><label for="">題目</label></el-col>
                  <el-col :span="22">{{ data.question }}</el-col>
                  <el-col :span="1"><router-link
                      :to="{name:'change',params:{id:data.id,type:1}}">更新</router-link></el-col>
                </el-row>
              <div>{{ data.answer }}</div>
                <el-divider/>
              </span>
              </span>
      </div>
    </el-tab-pane>
  </el-tabs>


</template>

<style>
.c_a {
  display: inline-block;
  margin-left: 30px;
  margin-bottom: 20px;
}

el-tab-pane {
  white-space: pre-wrap;
}
</style>